<template>
	<view>
		<view class="wrap paddingBottom">
			<view class="wrap-content">
				<view class="wrap-white">
					<block v-for="(item, index) in list" :key="index">
						<inputColumnVue
							v-if="item.type === 'input' && item.direct === 'column' && item.isShow"
							:item="item"
							v-model="dataInfo[item.key]"
						/>
						
						<wrapTextarea
							v-else-if="item.type === 'textarea' && item.isShow"
							:item="item"
							v-model="dataInfo[item.key]"
						/>
					</block>
				</view>
			</view>
		</view>
		
		<wrapFooterVue>
			<view class="wrap-footer-content flex align-center just-center">
				<view class="add" @click.stop="onSubmit">
					提交
				</view>
			</view>
		</wrapFooterVue>
	</view>
</template>

<script>
	import { OrderRefundApply } from "@/utils/API.js";
	
	import inputColumnVue from "../components/form/inputColumn.vue";
	import wrapTextarea from "../components/form/textarea.vue";
	import wrapFooterVue from "../components/footer/footer.vue";
	
	export default {
		components: {
			inputColumnVue,
			wrapFooterVue,
			wrapTextarea,
		},
		data() {
			return {
				orderID: "", //订单ID
				
				dataInfo: {
					money: "",
					remark: "",
				}
			};
		},
		computed: {
			list() {
				return [
					{
						"title": "退款金额",
						"require": true,
						"type": "input",
						"direct": "column",
						"key": "money",
						"mode": "digit",
						"place": "请输入退款金额",
						"tips": "请输入退款金额",
						"isShow": true,
					},
					{
						"title": "备注",
						"require": true,
						"type": "textarea",
						"key": "remark",
						"mode": "text",
						"place": "请输入备注信息",
						"tips": "请输入备注",
						"isLimit": true,
						"maxlength": 300,
						"isShow": true,
					}
				]
			}
		},
		onLoad(options) {
			if (options.hasOwnProperty("id")) {
				this.orderID = options.id;
			}
		},
		methods: {
			/**
			 * 确定
			 */
			onSubmit() {
				if (this.$filters.judgeFormData(this.list, this.dataInfo)) {
					this.$throttle(() => {
						let obj = { ...this.dataInfo };
						obj.order_id = this.orderID;
						OrderRefundApply(obj).then(res => {
							this.$st.success("退款成功", () => {
								uni.navigateBack();
							})
						})
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	@import "../components/css/form.css";
	
	.wrap {
		--bottom-height: 140rpx;
		padding: 33rpx;
		box-sizing: border-box;
		
		.wrap-content {
			width: 100%;
			overflow: hidden;
			
			.wrap-white {
				width: 100%;
				background-color: white;
				border-radius: 20rpx;
				overflow: hidden;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
		}
	}
	
	.wrap-footer-content {
		width: 100vw;
		height: 120rpx;
		overflow: hidden;
		padding: 0rpx 37rpx;
		box-sizing: border-box;
		
		.add {
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			background: linear-gradient(to right, #84BD00, #4982EA);
			border-radius: 50rpx;
			overflow: hidden;
			color: white;
			font-size: 30rpx;
		}
	}
</style>
